<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-30 20:35:21
 * @LastEditors: mxy
 * @LastEditTime: 2022-11-30 21:14:06
-->
<template>
  <section class="todoapp">
    <todo-header @add="addData"></todo-header>
    <todo-main :list="list" @del="deleteData" @state="editState"></todo-main>
    <todo-footer :list="list" @clear="clearData"></todo-footer>
  </section>
</template>

<script>
import TodoHeader from "@/components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      list: [
        { id: 12, name: "吃饭", isDone: false },
        { id: 14, name: "听歌", isDone: true },
        { id: 23, name: "洗澡", isDone: true },
        { id: 34, name: "睡觉", isDone: false },
        { id: 35, name: "游戏", isDone: false },
      ],
    };
  },
  methods: {
    deleteData(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
    addData(val) {
      this.list.unshift({ id: +new Date(), name: val, isDone: false });
    },
    editState(id) {
      const res = this.list.find((item) => item.id == id);
      res.isDone = !res.isDone;
    },
    clearData() {
      this.list = this.list.filter((item) => item.isDone == false);
    },
  },
};
</script>

<style></style>
